iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

Angular 學習雜記系列 第 7

Angular 學習雜記-Angular程式指令說明(續)

  • 分享至 

  • xImage
  •  
接下來,說明如何進行事件連結的簡單說明。例如:要觸發一個Html按鈕的click事件,要如何執行呢。

首先,在Angular的事件連結是用()指令來做連結,所以,要先在.ts檔案,先建立一個函式,來做觸發後,要處理的方式。例如:直接出現一個提示訊息好了。
在app-component.ts,先建立doclickevent的函式,回傳為void。也可以在建立一些要傳入的參數。
export class AppComponent {

  // 變數employeelists取得資料來源。
  employeelists = employeelist;

  // 觸發事件 函式。
  doclickevent(): void {
    alert('test');
  }
}
在app-component.html,在Table的後面,增加一個button HTML,在click事件用()指令,再指定要執行那一個函式即可。
<button (click)="doclickevent()">
  觸發按鈕
</button>

執行的畫面,如下。看看,在Angular架構下,要顯示一個訊息,是如此簡單。

https://ithelp.ithome.com.tw/upload/images/20190923/20000953msAyjQ6vWB.png


上一篇
Angular 學習雜記-Angular程式指令說明
下一篇
Angular 學習雜記-Angular的服務(Service)元件
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言